<template>
  <div>
    御剑乘风来,除魔天地间!
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      @close="closeHandle"
    >
      <span>这是一段信息</span>
      <login ref="loginBox"></login>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
           
<script>
import login from '@/components/login.vue'
export default {
  components: {
    login,
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    closeHandle() {
      console.log('closeHandle')
      /* 
      对话框只要一关闭  这个close事件就会触发  然后 closeHandle就会被调用
      只要closeHandle 被调用了==》清空表单数据
      问题：这个closeHandle函数属于父组件，清空数据属于子组件
      解决方法：父组件调用 子组件中的  reset()
      this.$refs.loginBox===>login组件中的this
      
       */
      console.log(this.$refs.loginBox, 'app=>8888')
      this.$refs.loginBox.reset() //  通过父组件过去子组件，然后调用子组件中的方法
    },
  },
}
</script>
<style lang='less'  scoped>
</style>